<template>
  <div class="customerSignedLesson">
	  <div class="newSignedClass">
		  <span class="newSignedClassTitle">课程</span><x-button mini @click.native="newSignedLesson" type="primary" class="newSignedClassBtn">新建</x-button>
	  </div>

	  <form-preview class="formCard"
	                v-for="(item,index) in items"
	                :key="index" header-label="课程名称"
	                :header-value="item.lesson"
	                :body-items="list[index]"
	                :footer-buttons="buttons2"
	                @click.native="jumpTo(item.id)"
	                name="demo"></form-preview>

	  <!--<swipeout class="vux-1px-tb">
		  <swipeout-item transition-mode="follow" v-for="(item,index) in items" :key="index">
			  <div slot="right-menu">
				  <swipeout-button @click.native="deleteItem(item.id,index)" type="primary">{{deleteText}}</swipeout-button>
			  </div>
			  <div slot="content">
				  <cell class="signedLessonCell" :title="item.name + '（剩余' + item.value + '课时）'" value-align="center">
					  <div>
						  <span>{{item.value}}课时</span><br>
						  <span>{{item.value}}课时</span>
					  </div>
				  </cell>
			  </div>
		  </swipeout-item>
	  </swipeout>

	  <group label-width="4.5em" label-margin-right="2em" label-align="right">
		  <cell class="signedLessonCell" v-for="item in items" :title="item.name" :value="item.value" value-align="left"></cell>
	  </group>
	  <x-button class="addBtn" @click.native="newSignedLesson">+新建</x-button>-->
  </div>
</template>

<script>
	import NetWorking from '../../../../utils/networking'
	import {XButton, Group, Cell, Swipeout, SwipeoutItem, SwipeoutButton, FormPreview} from 'vux'
  export default {
    name: "customer-lesson-details",
	  components: {
    	XButton,
		  Cell,
		  Group,
		  Swipeout,
		  SwipeoutItem,
		  SwipeoutButton,
		  FormPreview
	  },
	  props: ['id'],
	  data () {
		  return {
			  url: 'customer_lesson/getCustomerLessonModelByCusId',
			  items: [],
			  deleteText: '删除',
			  list: [],
			  buttons2: [{
				  style: 'primary',
				  text: '编辑'
			  }]
		  }
	  },
	  watch: {
		  items: function () {
			  for (var i = 0; i < this.items.length; i++) {
				  //二维数组
				  this.list[i] = new Array()
				  this.list[i].push({
					  label: '剩余课时',
					  value: this.items[i].points
				  }, {
					  label: '开始时间',
					  value: this.items[i].start_date
				  }, {
					  label: '结束时间',
					  value: this.items[i].end_date
				  })
			  }
		  }
	  },
	  created: function () {
    	let _this = this
    	NetWorking.doGet(
    		this.url,
		    null,
		    {
		    	params:{id: this.id}
		    }
	    ).then(
	      response => {
	        let rs = response.data
			    if(rs.error_code == 0){
	          _this.items = rs.customer_lesson_model_list
			    }else{
	          alert(rs.error_message)
			    }
		    }
	    )
	  },
	  methods: {
		  jumpTo(id) {
			  this.$router.push({ name: "updateSignedLesson", params: { id: id }})
		  },
		  newSignedLesson() {
			  this.$router.push({ name: "newSignedLesson", params: { id: this.id }})
		  },
		  deleteItem(id, index) {
		  	let _this = this
			  NetWorking.doDelete(
				  'customer_lesson',
				  null,
				  {
					  params:{id: id}
				  }
			  ).then(
				  response => {
					  let rs = response.data
					  if(rs.error_code == 0){
						  _this.items.splice(index, 1)
					  }else{
						  alert(rs.error_message)
					  }
				  }
			  )
		  }
	  }
	}
</script>

<style scoped>

	.customerSignedLesson {
		margin-bottom: 100px;
	}

	.formCard {
		border: solid;
		border-color: #f7f7fa;
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 20px;
		margin-bottom: 20px;
		border-radius: 25px;
		box-shadow: 5px 5px 5px #888888;
	}

	.formCard > .weui-form-preview__hd .weui-form-preview__value{
		font-size: 1.1em !important;
	}

	.signedLessonCell {
		padding: 0px 15px !important;
	}

	.newSignedClass {
		margin-top: 20px !important;
		text-align: right;
		margin-right: 12px;
	}

	.newSignedClassTitle {
		font-size: 22px;
		font-weight: bold;
		float: left;
		margin-left: 12px;
	}

	.newSignedClassBtn {
		color: white !important;
		background-color: #efae1b !important;
		margin-bottom: 12px;
	}

</style>
